{extend name="/base"}

{block name="header"}
<div class="layui-btn-group">
    <!--<button class="layui-btn layui-btn-sm layui-btn-danger" id="listDelete">删除</button>-->
    <a href="{:url('add')}" class="layui-btn layui-btn-sm">添加</a>
</div>
{/block}

{block name="body"}
<table id="dataTable" lay-filter="dataTable"></table>
<script type="text/html" id="options">
    <div class="layui-btn-group">
        <a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-sm" lay-event="permission">权限</a>
        <a class="layui-btn layui-btn-danger layui-btn-sm " lay-event="del">删除</a>
    </div>
</script>
{/block}

{block name="js"}
<script>
    layui.use(['jquery', 'table', 'element', 'form', 'layer'], function () {
        var table = layui.table;
        var $ = layui.jquery;
        var element = layui.element;
        var form = layui.form;
        var layer = layui.layer;

        //用户表格初始化
        var dataTable = table.render({
            elem: '#dataTable'
            , height: 500
            , url: "{:url('index')}" //数据接口
            , where: {model: "user"}
            , page: true //开启分页
            , cols: [[ //表头
                //{checkbox: true, fixed: true}
                {field: 'id', title: 'ID', sort: true, width: 80}
                , {field: 'name', title: '名称'}
                , {field: 'description', title: '描述'}
                , {field: 'create_time', title: '创建时间'}
                , {fixed: 'right', title: '操作', width: 320, align: 'center', toolbar: '#options'}
            ]]
        });

        //监听工具条
        table.on('tool(dataTable)', function (obj) { //注：tool是工具条事件名，dataTable是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'del') {
                layer.confirm('确认删除吗？', function (index) {
                    layer.close(index);
                    var load = layer.load();
                    $.post("{:url('del')}", {id: data.id}, function (res) {
                        layer.close(load);
                        if (res.code == 1) {
                            layer.msg(res.msg, {icon: 1, time: 1500}, function () {
                                obj.del();
                            })
                        } else {
                            layer.msg(res.msg, {icon: 2, time: 1500})
                        }
                    });
                });
            } else if (layEvent === 'edit') {
                location.href = '{:url("edit")}' + '&id=' + data.id;
            } else if (layEvent === 'permission') {
                location.href = '{:url("permission")}' + '&id=' + data.id;
            }
        });

        //按钮批量删除
        $("#listDelete").click(function () {
            var ids = []
            var hasCheck = table.checkStatus('dataTable')
            var hasCheckData = hasCheck.data
            if (hasCheckData.length > 0) {
                $.each(hasCheckData, function (index, element) {
                    ids.push(element.id)
                })
            }
            if (ids.length > 0) {
                layer.confirm('确认删除吗？', function (index) {
                    layer.close(index);
                    var load = layer.load();
                    $.post("{:url('del')}", {ids: ids}, function (res) {
                        layer.close(load);
                        if (res.code == 1) {
                            layer.msg(res.msg, {icon: 1, time: 1500}, function () {
                                dataTable.reload({
                                    page: {curr: 1}
                                })
                            })
                        } else {
                            layer.msg(res.msg, {icon: 2, time: 1500})
                        }
                    });
                })
            } else {
                layer.msg('请选择删除项', {icon: 2})
            }
        });

    })
</script>
{/block}